<template>
   <div>
    <van-nav-bar left-arrow @click-left="onClickLeft" fixed title="地图找房" />
     <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler" ak='wfViXp1lwE8uAlvaVLGjyeEAGBD2IroD'>
      <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_LEFT" class="scroll"></bm-navigation>

      <div v-if="showZone">
            <bm-marker v-for="(item, index) in zoneGeoPoints" :key="index" :position="{lng: item.coord.longitude, lat: item.coord.latitude}"
                >
                 <bm-label :content="`${item.label}` + `(${item.count})`" :labelStyle="{color: 'red', fontSize : '20px'}" :offset="{width: -20, height: -40}" @click="second(item.value)"/>
                <bm-marker v-for="(item, index) in zoneGeoPoints1" :key="index" :position="{lng: item.coord.longitude, lat: item.coord.latitude}"
                >
                 <bm-label :content="`${item.label}` + `(${item.count})`" :labelStyle="{color: 'red', fontSize : '20px'}" :offset="{width: -20, height: -40}" @click="third(item.value)" />
                  <bm-marker v-for="(item, index) in zoneGeoPoints2" :key="index" :position="{lng: item.coord.longitude, lat: item.coord.latitude}"
                >
                 <bm-label :content="`${item.label}` + `(${item.count})`" :labelStyle="{color: 'red', fontSize : '20px'}" :offset="{width: -20, height: -40}" @click="fourth(item.value)" />
            </bm-marker>
            </bm-marker>
            </bm-marker>
              <van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
                <huose-item v-for="item in list" :key="item.id" :item="item"/>
              </van-popup>
        </div>
    </baidu-map>
   </div>
</template>
<script>
import HuoseItem from '@/components/HuoseItem.vue'
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import { BmNavigation, BmMarker, BmLabel } from 'vue-baidu-map'
import { searchCity } from '@/api/city'
import { getMap } from '@/api/community'
import { filterCommunity } from '@/api/house'
export default {
  name: 'map-page',
  components: {
    BaiduMap,
    BmNavigation,
    BmMarker,
    BmLabel,
    HuoseItem

  },

  data () {
    return {
      center: { lng: 0, lat: 0 },
      zoom: 3,
      showZone: true,
      zoneGeoPoints: [],
      zoneGeoPoints1: [],
      zoneGeoPoints2: [],
      show: false,
      list: []

    }
  },
  methods: {
    handler ({ BMap, map }) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 11
    },
    async second (id) {
      const res = await getMap(id)
      console.log(res)
      const random = Math.floor(Math.random() * res.body.length)
      console.log(random)
      this.center.lng = res.body[random].coord.longitude
      this.center.lat = res.body[random].coord.latitude
      this.zoneGeoPoints1 = res.body
      this.zoom = 14
    },
    async third (id) {
      const res = await getMap(id)
      console.log(res)
      const random = Math.floor(Math.random() * res.body.length)
      console.log(random)
      this.center.lng = res.body[random].coord.longitude
      this.center.lat = res.body[random].coord.latitude
      this.zoneGeoPoints2 = res.body
      this.zoom = 16
      // this.isShow1 = false
    },
    async fourth (id) {
      // this.$toast.fail('不要点了，球球了')
      const res = await filterCommunity(id)
      console.log(res)
      this.show = true
      res.body.list.forEach(item => {
        item.houseImg = 'http://liufusong.top:8080' + item.houseImg
      })
      this.list = res.body.list
    },
    onClickLeft () {
      this.$router.back()
    }

  },
  async created () {
    const currentCity = localStorage.getItem('currentCity')
    console.log(currentCity)
    const res = await searchCity(currentCity)
    console.log(res)
    const res1 = await getMap(res.body.value)
    console.log(res1)
    const random = Math.floor(Math.random() * res1.body.length)
    console.log(random)
    this.center.lng = res1.body[random].coord.longitude
    this.center.lat = res1.body[random].coord.latitude
    this.zoneGeoPoints = res1.body
    console.log(this.zoneGeoPoints)
  }

}
</script>

<style scoped>
.map {
  width: 100%;
  height: 667px;
}
.scroll {
  width: 100%;
}
</style>
